<template>
  <div>
    <span class="search-condition-item-label"
          :title="attr.title ? attr.title : ''">{{ attr.title ? attr.title : '' }}</span>
    <a-radio-group class="search-condition-item-widget"
                   :value="newValue"
                   @change="onValueChange">
      <a-radio value="self"
               :disabled="attr.disabled"> {{ $i18n("collaboration.common.workflow.selfbuiltProcess") }} </a-radio>
      <a-radio :value="templateRadioValue"
               :disabled="attr.disabled">{{ $i18n("common.pending.col") }}</a-radio>
    </a-radio-group>
    <div v-if="newValue == templateRadioValue"
         class="template-div">
      <a-input v-model="templateName"
               class="template-input"
               :placeholder="attr.placeholder">
      </a-input>
      <div class="template-input-overlay-div"
           @click="onTemplateDivClick"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      attr: {
        type: Object,
        default: {
          title: '',
          items: []
        }
      },
      value: {
        type: Object,
        default: null
      }
    },
    data() {
      const templateRadioValue = 'template';
      const value = this.value && this.value.value ? this.value.value : '';
      let templateValue = '';
      let templateName = '';
      console.log(this.value);
      templateValue = this.value.templateValue ? this.value.templateValue : '';
      templateName = this.value.templateName ? this.value.templateName : '';

      return {
        newValue: value,
        templateValue: templateValue,
        templateName: templateName,
        templateRadioValue: templateRadioValue
      };
    },
    watch: {
      value(newVal, oldVal) {
        this.newValue = newVal && newVal.value ? newVal.value : '';
        this.templateValue = newVal.templateValue ? newVal.templateValue : '';
        this.templateName = newVal.templateName ? newVal.templateName : '';
      }
    },
    methods: {
      onValueChange(e) {
        const value = e.target.value;
        if (this.newValue != value) {
          this.newValue = value;
          let emitValue = { value: value };
          emitValue.templateValue = this.templateValue;
          emitValue.templateName = this.templateName;

          this.emitValueChange(emitValue);
        }
      },
      onTemplateDivClick() {
        if (this.attr.disabled) {
          return;
        }
        const params = {
          state: '0,1',
          hasAuth: 'false',
          isAll: 'true'
        };

        const backfillData = {
          value: this.templateValue,
          text: this.templateName
        };

        if (this.attr.managerType == 'mySupervise') {
          this.templateChoose(
            '1,2',
            true,
            '',
            'MaxScope',
            '',
            null,
            null,
            null,
            backfillData,
            50,
            null,
            null,
            null,
            null,
            params
          );
        } else {
          this.templateChoose(
            null,
            true,
            '',
            'MaxScope',
            '',
            null,
            null,
            null,
            backfillData,
            50,
            null,
            null,
            null,
            null,
            params
          );
        }
      },
      templateChoose(
        moduleType,
        isMul,
        accountId,
        scope,
        excludeTemplateIds,
        reportId,
        isCanSelectCategory,
        isComponent,
        backfillData,
        maxSelect,
        memberId,
        showOldEdocTemplate,
        templateTypes,
        opeEdocRoot,
        params
      ) {
        var ur = '/seeyon/template/template.do?method=templateChooseMul';
        if (typeof isComponent == 'undefined' || isComponent == null || isComponent == '') {
          ur += '&isComponent=Y';
        } else {
          ur += '&isComponent=' + isComponent;
        }
        if (typeof moduleType != 'undefined' && moduleType != null) ur += '&moduleType=' + moduleType;
        if (typeof isMul != 'undefined' && isMul != null) ur += '&isMul=' + isMul;
        if (typeof accountId != 'undefined' && accountId != null) ur += '&accountId=' + accountId;
        if (typeof scope != 'undefined' && scope != null) ur += '&scope=' + scope;
        if (typeof excludeTemplateIds != 'undefined' && excludeTemplateIds != null)
          ur += '&excludeTemplateIds=' + excludeTemplateIds;
        if (typeof reportId != 'undefined' && reportId != null) ur += '&reportId=' + reportId;
        if (typeof isCanSelectCategory != 'undefined' && isCanSelectCategory != null)
          ur += '&isCanSelectCategory=' + isCanSelectCategory;
        if (typeof memberId != 'undefined' && memberId != null) {
          ur += '&memberId=' + memberId;
        }
        if (typeof showOldEdocTemplate != 'undefined' && showOldEdocTemplate != null) {
          ur += '&showOldEdocTemplate=' + showOldEdocTemplate;
        }
        if (typeof templateTypes != 'undefined' && templateTypes != null) {
          ur += '&templateTypes=' + templateTypes;
        }
        if (typeof opeEdocRoot != 'undefined' && opeEdocRoot != null) {
          ur += '&opeEdocRoot=' + opeEdocRoot;
        }
        if (typeof params != 'undefined' && params != null) {
          if (typeof params.state != 'undefined' && params.state != null) {
            ur += '&state=' + params.state;
          }
          if (typeof params.hasAuth != 'undefined' && params.hasAuth != null) {
            ur += '&hasAuth=' + params.hasAuth;
          }
          if (typeof params.isAll != 'undefined' && params.isAll != null) {
            ur += '&isAll=' + params.isAll;
          }
          if (typeof params.hasAppLinkTemplate != 'undefined' && params.hasAppLinkTemplate != null) {
            ur += '&hasAppLinkTemplate=' + params.hasAppLinkTemplate;
          }
        }
        if (typeof canShowForm != 'undefined' && canShowForm != '') {
          ur = ur + '&canShowForm=' + canShowForm;
        } else {
          ur = ur + '&canShowForm=true';
        }
        const self = this;
        const dialog = $.dialog({
          url: ur,
          title: '选择模板', //选择模版
          width: 760,
          height: 500,
          transParams: { _tids: backfillData?.value || '', _tnames: backfillData?.text || '' },
          targetWindow: getCtpTop(),
          buttons: [
            {
              isEmphasize: true,
              text: '确定', //确定
              handler: function () {
                const result = dialog.getReturnValue();
                if (result['ids'].length < 1) {
                  //您至少需要选择一个模版!
                  $.alert('您至少需要选择一个模版!');
                  return;
                }
                if (maxSelect) {
                  var arrIds = result['ids'].split(',');
                  if (arrIds.length > maxSelect) {
                    //超出了最大选择模板数量范围提示
                    $.alert($.i18n('template.templateChoose.maxQuantity', arrIds.length, maxSelect));
                    return;
                  }
                }
                self.selectFlowTemplateCallback(result);
                dialog.close();
              }
            },
            {
              text: '取消', //取消
              handler: function () {
                dialog.close();
              }
            }
          ],
          minParam: {
            show: false
          },
          maxParam: {
            show: false
          }
        });
      },
      selectFlowTemplateCallback({ ids, names }) {
        this.templateValue = ids;
        this.templateName = names.join(',');

        let emitValue = { value: this.newValue };
        emitValue.templateValue = ids;
        emitValue.templateName = names.join(',');

        this.emitValueChange(emitValue);
      },
      emitValueChange(value) {
        this.$emit('valueChange', { key: this.attr.key, value: value });
      },
      getFormatValue() {
        const formatValue = {};
        const key = this.attr.key;
        formatValue[key] = this.newValue;
        if (this.newValue == this.templateRadioValue) {
          formatValue[key + 'Ids'] = this.templateValue;
        }

        return formatValue;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .search-condition-item-widget {
    flex: 0 0 auto;
  }
  .template-div {
    position: relative;
    display: flex;
    flex: 1 1 auto;

    .template-input {
      width: 100%;
    }

    .template-input-overlay-div {
      position: absolute;
      opacity: 0;
      left: 0px;
      top: 0px;
      height: 100%;
      width: 100%;
    }
  }
</style>
